<template>
  <div>
    <div class="nav">
      <div>
        <i class="el-icon-arrow-left"  @click="goBack"/>
        <span>通讯录</span>
      </div>

      <el-menu :default-active="activeIndex"  router active-text-color='#0DB3A6' class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/contacts/internal">内部组织</el-menu-item>
        <el-menu-item index="/contacts/interconnected">互联组织</el-menu-item>
        <el-menu-item index="/contacts/manager">管理员</el-menu-item>
      </el-menu>
      <!--退出-->
      <LogOut/>
    </div>
  </div>
</template>
<script>
import LogOut from '@/components/LogOut'

export default {
  components:{LogOut},
  computed: {
    navName: {
      get () {
        return this.$store.state.design.navName
      },
      set (newVal) {
        this.$store.commit('design/SET_NAVNAME', newVal)
      }
    }
  },
  data () {
    return {
      activeIndex: '/contacts/internal'
    }
  },
  created() {
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
  },
  watch: {
    $route: {
      handler (newVal) {
        this.activeIndex = newVal.path
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid #f5f5f5;
  box-sizing: border-box;
  height: 60px;
  .el-icon-arrow-left{
    font-size: 30px;
    font-weight: 800;
    color: #0DB3A6;
  }
  .is-active{
    border-bottom: 4px solid #0DB3A6;
  }
  .el-menu.el-menu--horizontal{
    border-bottom: none;
  }
}
</style>
